<template>
  <div class="container">
    <div class="topbar">
      <div class="title"><span>处理列表</span></div>
      <div class="search-bar">
        <!-- <span style="font-size: 14px; line-height: 50px; cursor: pointer; color: #409EFF;" @click="goLetterList">我的上访列表</span> -->
        <span style="line-height: 50px;"><el-button type="primary" @click="goLetterList">我的上访列表</el-button></span>
        <span class="filter" @click="showSearchPanel = !showSearchPanel">
          <span>筛选<img src="./../../../assets/livolobim/filter.png"></span>
          <div class="dot" v-if="hasConf"></div>
        </span>
        <span style="font-size: 14px; line-height: 50px; cursor: pointer; color: #909399; margin-right: 0;" @click="goSetting" v-if="hasLimit">
          <span>设置 <i class="el-icon-setting"></i></span>
        </span>
        <el-drawer
          :visible.sync="showSearchPanel"
          :withHeader="false"
          :size="'500px'">
          <div style="display: flex; flex-direction: column; height: 100vh; padding-bottom: 30px;">
            <el-form label-width="120px" label-position="top" style="flex: 1;">
              <div style="font-size: 16px; line-height: 50px; font-weight: bold; border-bottom: 1px solid #DCDFE6; padding: 0 20px;">筛选</div>
              <div style="padding: 0 20px; margin-top: 20px; min-height: 400px; overflow-y: auto;">
                <el-form-item label="上访主题：">
                  <el-input style="margin-right: 20px;" placeholder="关于主题的模糊搜索" prefix-icon="el-icon-search" v-model="searchData.caseTitle"></el-input>
                </el-form-item>
                <el-form-item label="上访时间：">
                  <el-col :span="11">
                    <el-date-picker type="date" placeholder="请选择起始时间" v-model="searchData.startTime" style="width: 100%;" value-format="yyyy-MM-dd" @change="changeDate('startTime', $event)"></el-date-picker>
                  </el-col>
                  <el-col style="text-align: center;" :span="2">-</el-col>
                  <el-col :span="11">
                    <el-date-picker type="date" placeholder="请选择截止时间" v-model="searchData.endTime" style="width: 100%;" value-format="yyyy-MM-dd" @change="changeDate('endTime', $event)"></el-date-picker>
                  </el-col>
                </el-form-item>
                <el-form-item label="状态：">
                  <el-select v-model="searchData.caseStatus" placeholder="请选择状态" style="width: 100%;">
                    <el-option value="" label="全部"></el-option>
                    <el-option value="1" label="进行中"></el-option>
                    <el-option value="2" label="已完成"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-form>
            <div style="min-height: 40px; display: flex; padding: 0 20px;">
              <el-button style="width: 50%" @click="searchData=JSON.parse(searchDataInit)">重置</el-button>
              <el-button type="primary" style="width: 50%">查询</el-button>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
    <div class="table">
      <el-table :height="tableHeight+'px'"
       :data="tableData" stripe border :default-sort="{prop: 'caseCreatetime', order: 'descending'}"
       style="width: 100%">
        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
        <el-table-column prop="caseTitle" label="主题" min-width="200"></el-table-column>
        <el-table-column label="匿名" min-width="80" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.caseIsAnonymity === '1' ? '匿名' : '实名'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" min-width="80" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.caseIsAnonymity === '1' ? '' : scope.row.caseCreatorName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="caseCreatetime" label="上访时间" min-width="150" sortable align="center"></el-table-column>
        <el-table-column prop="caseStatus" label="状态" min-width="100" sortable align="center">
          <template slot-scope="scope">
            <span>{{scope.row.caseStatus === '1' ? '进行中' : '已完成'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="caseConveyName" label="转达" min-width="100" align="center"></el-table-column>
        <el-table-column label="操作" min-width="150" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.native.prevent="goLetter(scope.row.id, 'view')">查看</el-button>
            <el-button type="text" size="small" @click.native.prevent="goLetter(scope.row.id, 'deal')" v-if="scope.row.caseStatus==='1'">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      <div class="btn-wrapper"></div>
      <el-pagination background layout="prev, pager, next" :total="totalCount" :page-size="limit" :current-page.sync="page" @current-change="currentChangeHandle"></el-pagination>
    </div>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import formUtil from "@/utils/formUtil";
export default {
  data () {
    return {
      searchData: {
        caseTitle: '',
        startTime: null,
        endTime: null,
        caseStatus: '',
      },
      limit: 20,
      page: 1,
      searchDataInit: {},
      totalCount: 0,
      tableData: [],
      tableHeight: '',
      showSearchPanel: false,
      authority: {}
    };
  },
  mixins: [dingMixin],
  async mounted () {
    this.tableHeight = document.documentElement['clientHeight'] - 125
    window.onresize = () => {
      this.tableHeight = document.documentElement['clientHeight'] - 125
    }
    if(this.$route.params.id) this.goLetter(this.$route.params.id, 'deal')
    this.searchDataInit = JSON.stringify(this.searchData)
    this.getCaseList(true)
    this.authority = await this.$httpN.postB('petition/authority/asd')
  },
  activated() {
    this.getCaseList()
  },
  watch: {
    searchData: {
      handler(newValue) {
        if(!(newValue.startTime && newValue.endTime && (new Date(newValue.startTime) - new Date(newValue.endTime) > 0))) this.getCaseList(true)
      },
      deep: true
    }
  },
  computed: {
    hasConf() {
      return JSON.stringify(this.searchData) !== this.searchDataInit
    },
    hasLimit() {
      return this.authority.userLevel === '1'
    }
  },
  methods: {
    currentChangeHandle (val) {
      this.page = val
      this.getCaseList()
    },
    goSetting() {
      this.$router.push({ name: 'letter-setting'})
    },
    goLetter(id, handleType) {
      this.$router.push({ name: 'letter-add', params: { id: id, handleType: handleType }})
    },
    goRules(id, handleType) {
      this.$router.push({ name: 'letter-rules'})
    },
    async getCaseList(init) {
      if(init) this.page = 1;
      var searchData = {
        limit: this.limit,
        page: this.page,
        caseTitle: this.searchData.caseTitle,
        startTime: this.searchData.startTime,
        endTime: this.searchData.endTime,
        caseStatus: this.searchData.caseStatus,
      }
      let {list, totalCount} = await this.$httpN.postB('petition/case/handleList', searchData);
      this.tableData = list;
      if(init) this.totalCount = totalCount;
    },
    async delLetter(id) {
      formUtil.submitConfirm('您确定要删除吗', async ()=> {
        if(!await this.$httpN.postB('petition/case/delete', [id], false)) return 
        formUtil.submitSuccess('删除成功');
        this.getCaseList();
      })
    },
    goLetterList() {
      this.$router.push({ name: 'letter-list'})
    },
    changeDate(name, event) {
      if(this.searchData.startTime && this.searchData.endTime && (new Date(this.searchData.startTime) - new Date(this.searchData.endTime) > 0)) {
        this.searchData[name] = ''
        return this.$message.error('截止日期不可小于开始日期');
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100vh;
  .topbar{
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #DCDFE6;
    .title {
      line-height: 50px;
      font-size: 18px;
      display: flex;
    }
    .search-bar {
      display: flex;
      >span {
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
      }
      .el-icon-plus {
        width: 12px;
        height: 12px;
        font-size: 12px;
      }
      .filter {
        font-size: 14px;
        cursor: pointer;
        color: #909399;
        position: relative;
        line-height: 50px;
        img {
          width: 14px;
          height: 14px;
          position: relative;
        }
        .dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #4983FF;
          display: inline-block;
          vertical-align: super;
        }
      }
    }
  }
  .table {
    margin: 20px 10px 0 10px;
    /deep/ .caret-wrapper {
      height: 32px;
      .ascending {
        top: 3px;
      }
    }
  }
  .bottom {
    height: 54px;
    padding: 13px 20px;
    display: flex;
    justify-content: space-between;
  }
}
</style>